<template>
  <div class="home">
    <title>网梦云 - 主页</title>

    <!-- 轮播组件 -->
    <binner-one-item :text="binnerText"></binner-one-item>

    <!-- 一楼组件 -->
    <title-item :title="titleList[0]"></title-item>
    <floor-one-item></floor-one-item>

    <!-- 二楼组件 -->
    <title-item :title="titleList[1]"></title-item>
    <floor-two-item></floor-two-item>
    <div class="moer-btn-box">
      <router-link to="/example" class="moer-btn">更多案例展示</router-link>
    </div>

    <!-- 三楼组件 -->
    <about-item></about-item>

    <!-- 四楼组件 -->
    <title-item :title="titleList[3]"></title-item>
    <floor-four-item></floor-four-item>

    <!-- 五楼组件 -->
    <floor-five-item></floor-five-item>

    <!-- 六楼组件 -->
    <title-item :title="titleList[5]"></title-item>
    <floor-six-item></floor-six-item>
    <div class="moer-btn-box">
      <router-link to="/example" class="moer-btn">更多资讯</router-link>
    </div>

    <!-- 七楼组件 -->
    <title-item :title="titleList[6]"></title-item>
    <floor-seven-item></floor-seven-item>
    
  </div>
</template>

<script>
// @ is an alias to /src
import data from "@/data/index.json";

import floorOneItem from "@/components/indexItem/floor-1-Item.vue";
import floorTwoItem from "@/components/indexItem/floor-2-Item.vue";
import aboutItem from "@/components/aboutItem.vue";
import floorFourItem from "@/components/indexItem/floor-4-Item.vue";
import floorFiveItem from "@/components/indexItem/floor-5-Item.vue";
import floorSixItem from "@/components/indexItem/floor-6-Item.vue";
import floorSevenItem from "@/components/indexItem/floor-7-Item.vue";

export default {
  name: "home",
  components: {
    floorOneItem,
    floorTwoItem,
    aboutItem,
    floorFourItem,
    floorFiveItem,
    floorSixItem,
    floorSevenItem
  },
  data() {
    return {
      binnerText: data.binnerText,
      titleList: data.titleList,
      floor1Data: data.floor1Data
    };
  },
  created() {
    this.$store.commit("headerStyle", "t");
    this.$store.commit("nowPage", 0);
  }
};
</script>

<style lang="less" scoped>
.moer-btn-box {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  .moer-btn {
    display: inline-block;
    border: 1px solid #007eff;
    border-radius: 30px;
    padding: 10px 30px;
    margin: auto;
    &:hover {
      background-color: #007eff;
      color: #fff;
    }
  }
}
</style>
